<template>
	<view class="container">
		<view class="list">
			<view @click="changeSelect(index)" v-for="(item,index) in petList" :key="index">
				<Card :avatur="item.pet_avatur" :name="item.pet_name" :variety="item.pet_variety" :weight="item.pet_weight" :selected="item.selected"></Card>
			</view>
		</view>
		<view class="bottom">
			<view @click="queren()" class="button">确定</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,onBeforeMount} from "vue"
	import Card from "@/pages/liu/components/card.vue"
	onBeforeMount(()=>{
		petList.value=uni.getStorageSync('petlist')
		petList.value.forEach((item)=>{
			item.selected=false
		})
	})
	
	let petList=ref([])
	
	function changeSelect(index){
		petList.value.forEach((item)=>{
			item.selected=false;
		})
		petList.value[index].selected=true;
	}
	
	function queren(){
		petList.value.forEach((item)=>{
			if(item.selected){
				uni.$emit('receivepet',item)
			}
		})
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.container{
		width: 100%;
		padding-top: 40rpx;
		display: flex;
		justify-content: center;
		
		.list{
			width: 90%;
		}
		
		.bottom{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			box-shadow: 0 -12rpx 64rpx -14rpx rgba(0, 0, 0, 0.15);
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.button{
				background-color: #f8e177;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #090300;
				letter-spacing: 0.2em;
				width: 90%;
				height: 70%;
				border-radius: 50rpx;
				
				&:active{
					opacity: 0.7;
				}
			}
		}
	}
</style>
